<template>
    <li class="ask-breadcrumb__item" :class="{ 'is-link': isLink || to}">
        <div class="ask-breadcrumb__item-text" @click="handleClick($event)">
            <template v-if="to">
                <router-link :to="to"><slot>{{showLable}}</slot></router-link>
            </template>
            <template v-else>
                <slot>{{showLable}}</slot>
            </template>
        </div>
        <i class="ask-breadcrumb__separator el-icon-arrow-right" v-if="!onlyIcon"></i>
    </li>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { getRouterConfig, AllRoutersMap, AsyncRoutersMap } from "@/router";
import { treeFind } from "@/utils";

@Component({
    name: "BreadcrumbItem"
})
export default class AskBreadcrumbItem extends Vue {
    @Prop({
        type: Boolean,
        default: false
    }) readonly isLink!: boolean;

    @Prop({
        type: String,
        default: ""
    }) readonly to!: string;

    @Prop({
        type: String,
        default: ""
    }) readonly name!: string;

    @Prop({
        type: Boolean,
        default: false
    }) readonly onlyIcon!: boolean;

    handleClick(event: any) {
        event.target.blur && event.target.blur();
        this.$emit("click", event);
    }

    get showLable() {
        const routerConfig: any = getRouterConfig(this.name);
        if (routerConfig.title) {
            return routerConfig.title;
        } else {
            const _route = treeFind(AllRoutersMap.concat(AsyncRoutersMap), (data: any) => {
                return data.name === this.name;
            });
            return (_route && _route.meta && _route.meta.title) || this.name;
        }
    }
}
</script>
